// ----------------------获取数据并渲染----------------------
function renderCategory() {
  axios.get("/my/category/List").then((res) => {
    let { status, data } = res.data;
    if (status === 0) {
      let str = "";
      data.forEach((item) => {
        str += `
        <tr>
         <td>${item.name}</td>
         <td>${item.alias}</td>
         <td>
           <button data-id='${item.id}' data-name='${item.name}' data-alias='${item.alias}'  type="button" class="layui-btn layui-btn-xs">
             编辑
           </button>
           <button
             type="button" data-id='${item.id}'
             class="del layui-btn layui-btn-xs layui-btn-danger"
           >
             删除
           </button>
         </td>
       </tr>
        `;
      });
      // 循环结束，把拼接得到的很多个tr放到tbody中
      $("tbody").html(str);
    }
  });
}

renderCategory();

let addIndex;
//--------------------删除功能-------------------------
$("tbody").on("click", ".del", function () {
  // (this) 表示删除按钮，不表示tbody
  let id = $(this).data("id");
  // 询问是否要删除 (对于敏感操作，必须询问)
  layer.confirm("你确定删除吗？", function (index) {
    // do something
    // 确定，调用接口，发送请求
    axios.get(`/my/category/delete?id=${id}`).then((res) => {
      let { status, message } = res.data;
      if (status === 0) {
        layer.msg(message);
        // 更新页面的数据
        renderCategory();
      }
    });
    layer.close(index);
  });
});

// -------------------------添加功能------------------
// 1. 点击添加按钮，出现弹层
$('button:contains("添加类别")').on("click", function () {
  addIndex = layer.open({
    type: 1,
    title: "添加类别",

    // 2. 设置弹出的内容
    content: $("#tpl-add").html(),
    area: ["500px", "250px"],
  });
});
// 3. 表单提交，发送ajax请求，完成添加
$("body").on("submit", "#add-form", function (e) {
  e.preventDefault();
  let data = $(this).serialize(); // 必须检查 input的name
  axios.post("/my/category/add", data).then((res) => {
    let { status, message } = res.data;
    if (status === 0) {
      layer.msg(message);
      renderCategory(); //更新页面的数据
      layer.close(addIndex);
    }
  });
});

// -------------------------修改功能------------------
// 1. 点击编辑按钮 出现弹层
$("tbody").on("click", 'button:contains("编辑")', function () {
  let shuju = $(this).data(); //不给data() 传递数据，表示获取全部的 data-xxx属性
  editIndex = layer.open({
    type: 1,
    title: "编辑类别",
    // 2.设置弹出的内容
    content: $("#tpl-edit").html(),
    area: ["500px", "250px"],
    success: function () {
      // 3. 必须等弹层出来之后，保证表单已经存在了，input已经出现了，再数据回填
      // 使用layui的form模块，快速的数据回填
      let form = layui.form;
      form.val("edit", shuju);
    },
  });
});
// 4. 表单提交，完成修改
$("body").on("submit", "#edit-form", function (e) {
  e.preventDefault();
  let data = $(this).serialize();
  axios.post("/my/category/update", data).then((res) => {
    let { status, message } = res.data;
    if (status === 0) {
      layer.msg(message);
      renderCategory(); //更新页面的数据
      layer.close(editIndex);
    }
  });
});
